<li class="bot-information-box white-box">
    <div class="bot-card-image overflow-hidden">
        <img src="{{avatar_url}}" class="bot-card-avatar" />
        <div class="bot-card-details">
            <div class="bot-card-name">{{name}}</div>
            {{#if is_active}}
            <div class="edit-bot-buttons">
                <button type="submit" class="btn open_edit_bot_form tippy-zulip-delayed-tooltip" data-sidebar-form="edit-bot" data-tippy-content="{{t 'Edit bot' }}" data-email="{{email}}">
                    <i class="fa fa-pencil blue" aria-hidden="true"></i>
                </button>
                <a type="submit" download="{{zuliprc}}" class="btn download_bot_zuliprc tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Download zuliprc' }}" data-email="{{email}}">
                    <i class="fa fa-download sea-green" aria-hidden="true"></i>
                </a>
                <button type="submit" id="copy_zuliprc" class="btn copy_zuliprc tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Copy zuliprc' }}">
                    {{> ../copy_to_clipboard_svg }}
                </button>
                <button type="submit" class="btn deactivate_bot danger-red tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Deactivate bot' }}" data-user-id="{{user_id}}">
                    <i class="fa fa-user-times" aria-hidden="true"></i>
                </button>
                <button type="submit" class="btn open_bots_subscribed_streams tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Subscribed channels' }}" data-user-id="{{user_id}}">
                    <i class="fa fa-hashtag purple" aria-hidden="true"></i>
                </button>
                {{#if is_incoming_webhook_bot}}
                <button type="submit" class="btn open-generate-integration-url-modal tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Generate URL for an integration'}}" data-api-key="{{api_key}}">
                    <i class="fa fa-link steel-blue" aria-hidden="true"></i>
                </button>
                {{/if}}
            </div>
            {{/if}}
        </div>
    </div>
    <div class="bot-card-info" data-user-id="{{user_id}}">
        <div class="bot-card-type">
            <div class="bot-card-field">{{t "Bot type" }}</div>
            <div class="bot-card-value">{{type}}</div>
        </div>
        <div class="bot-card-email">
            <div class="bot-card-field">{{t "Bot email" }}</div>
            <div class="bot-card-value">{{email}}</div>
        </div>
        {{#if is_active}}
        <div class="bot-card-api-key">
            <span class="bot-card-field">{{t "API key" }}</span>
            <div class="bot-card-api-key-value-and-button no-select">
                <!-- have the `.text-select` in `.no-select` so that the value doesn't have trailing whitespace. -->
                <span class="bot-card-value text-select">{{api_key}}</span>
                <button type="submit" class="button no-style btn-secondary bot-card-regenerate-bot-api-key tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Generate new API key' }}" data-user-id="{{user_id}}">
                    <i class="fa fa-refresh" aria-hidden="true"></i>
                </button>
            </div>
            <div class="bot-card-api-key-error text-error"></div>
        </div>
        {{else}}
        <button class="button round btn-warning reactivate_bot" data-user-id="{{user_id}}">{{t "Reactivate bot" }}</button>
        {{/if}}
    </div>
</li>
